<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"
          integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<style>
  .container {
    width: 600px;
    height: 400px;
  }

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    flex-flow: column;
  }

  .item {
    width: 20%;
    height: 20%;
    box-sizing: border-box;
    border: 1px solid #ccc;
  }
  .active{
    background-color: rgba(255, 38, 5, 0.39);
  }
</style>
<body>
<div class="container">
  <div class="content">
  </div>
</div>
</body>
<script>
  !function generate() {
    var col = 7;
    var row = 5;
    var str = '';
    for (var i = 1; i <= row; i++) {
      for (var j = 1; j <= col; j++) {
        if(true){
          str += '<div class="item active" data-num="' + i + '-' + j + '"></div>';
        }else {
          str += '<div class="item" data-num="' + i + '-' + j + '"></div>'
        }
      }
    }
    $('.content').append(str);
    $('.item').css({
      width: (100 / col) + '%',
      height: (100 / row) + '%',
    })
    $('.container').on('click', '.item', function () {
      let num = $(this).data('num');
      console.log(num)
      //todo
    })
  }()
</script>
</html>
